<template>
  <pre style="padding-left: 0">  
        
        
      <code class="language-Markup  line-numbers">
        <strong>解释</strong>
        虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 ref attribute
         
        &lt;script&gt; setup&gt;
        import { ref, onMounted } from 'vue'

        // 声明一个 ref 来存放该元素的引用
        // 必须和模板里的 ref 同名
        const input = ref(null)

        onMounted(() =&gt; {
        input.value.focus()
        })
        &lt;/script&gt;

        &lt;template&gt;
        &lt;input ref="input" /&gt;
        &lt;/template&gt;


        <strong>v-for 中的模板引用</strong>
        &lt;script setup&gt;
        import { ref, onMounted } from 'vue'

        const list = ref([
        /* ... */
        ])

        const itemRefs = ref([])

        onMounted(() =&gt; console.log(itemRefs.value))
        &lt;/script&gt;

        &lt;template&gt;
        &lt;ul&gt;
            &lt;li v-for="item in list" ref="itemRefs"&gt;
            &#123;&#123; item &#125;&#125;
            &lt;/li&gt;
        &lt;/ul&gt;
        &lt;/template&gt;

      </code>
    </pre>

  <div>
    <el-input ref="elInputTest" v-model="eValue" />
    <el-button type="primary" @click="getValue"
      >获取（elInputTest）的值</el-button
    >

    <div ref="elRow"></div>
    <el-button type="primary" @click="setRowStyle">给row添加样式</el-button>
  </div>
</template>
  <script lang="ts" setup>
import { ref,onMounted } from "vue";
import Prism from "prismjs";
onMounted(()=>{
    Prism.highlightAll();
  })
const eValue = ref("");
const elInputTest = ref(null);
const elRow = ref(null);

function getValue() {
  debugger;
  //获取控件
  if (elInputTest.value) {
    const control = (elInputTest.value as any).input;
    const elValue = control.value;
    alert(elValue);
  }
}

function setRowStyle() {
  //elRow.value  获取到dom 元素
  if (elRow.value) {
    let control = elRow.value as any;
    control.style.border = "1px";
    control.style.borderStyle = "solid";
    control.style.height = "100px";
    control.style.width = "100px";
  }
}
</script>